<template>
  <div>
    <h1>【aty-tooltip】 component demo</h1>
    <p>【aty-tooltip】 本质</p>
    <aty-row class="fd-tooltip-box">
      <aty-row>
        <aty-title level="4">1.【aty-tooltip】 基础</aty-title>
        <aty-tooltip content="这里是提示文字">
          当鼠标经过这段文字时，会显示一个气泡框
        </aty-tooltip>
      </aty-row>
      <aty-row>
        <aty-title level="4">2.【aty-tooltip】 位置 </aty-title>
        <div class="top">
          <aty-tooltip content="Top Left 文字提示" placement="top-start">
            <aty-button>上左</aty-button>
          </aty-tooltip>
          <aty-tooltip content="Top Center 文字提示" placement="top">
            <aty-button>上边</aty-button>
          </aty-tooltip>
          <aty-tooltip content="Top Right 文字提示" placement="top-end">
            <aty-button>上右</aty-button>
          </aty-tooltip>
        </div>
        <div class="center">
          <div class="center-left">
            <aty-tooltip content="Left Top 文字提示" placement="left-start">
              <aty-button>左上</aty-button>
            </aty-tooltip><br /><br />
            <aty-tooltip content="Left Center 文字提示" placement="left">
              <aty-button>左边</aty-button>
            </aty-tooltip><br /><br />
            <aty-tooltip content="Left Bottom 文字提示" placement="left-end">
              <aty-button>左下</aty-button>
            </aty-tooltip>
          </div>
          <div class="center-right">
            <aty-tooltip content="Right Top 文字提示" placement="right-start">
              <aty-button>右上</aty-button>
            </aty-tooltip><br /><br />
            <aty-tooltip content="Right Center 文字提示" placement="right">
              <aty-button>右边</aty-button>
            </aty-tooltip><br /><br />
            <aty-tooltip content="Right Bottom 文字提示" placement="right-end">
              <aty-button>右下</aty-button>
            </aty-tooltip>
          </div>
        </div>
        <div class="bottom">
          <aty-tooltip content="Bottom Left 文字提示" placement="bottom-start">
            <aty-button>下左</aty-button>
          </aty-tooltip>
          <aty-tooltip content="Bottom Center 文字提示" placement="bottom">
            <aty-button>下边</aty-button>
          </aty-tooltip>
          <aty-tooltip content="Bottom Right 文字提示" placement="bottom-end">
            <aty-button>下右</aty-button>
          </aty-tooltip>
        </div>
      </aty-row>

      <aty-row>
        <aty-title level="4">3.【aty-tooltip】 多行 </aty-title>
        <aty-tooltip placement="top">
          <aty-button>多行</aty-button>
          <div slot="content">
            <p>显示多行信息</p>
            <p><i>可以自定义样式</i></p>
          </div>
        </aty-tooltip>
      </aty-row>
      <aty-row>
        <aty-title level="4">3.【aty-tooltip】 禁用 </aty-title>
        <aty-tooltip placement="top" content="可以禁用文字提示" :disabled="disabled">
          <aty-button @click="disabled = true">点击关闭提示</aty-button>
        </aty-tooltip>
      </aty-row>
      <aty-row>
        <aty-title level="4">3.【aty-tooltip】 延时2秒显示 </aty-title>
        <aty-tooltip placement="top" content="Tooltip 文字提示" :delay="2000">
          <aty-button @click="disabled = true">延时2秒显示</aty-button>
        </aty-tooltip>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      disabled: false
    }
  }
}
</script>
<style  lang="less" type="text/less"  scoped>
    .fd-tooltip-box {
        margin: 20px;
        text-align: left;
    }
    .top,.bottom{
        text-align: center;
    }
    .center{
        width: 300px;
        margin: 10px auto;
        overflow: hidden;
    }
    .center-left{
        float: left;
    }
    .center-right{
        float: right;
    }
</style>
